<template>
    <div class="organization">
        <div class="header" @click="openPopup">
            <div class="header-content">
                <div class="name">{{departPeople.name || defaultPeople || name || '未选择'}}</div>
                <x-icon type="ios-arrow-right" fill="#fff" size="24" v-if="!show"></x-icon>
                <x-icon type="ios-arrow-down" fill="#fff" size="24" v-if="show"></x-icon>
                <!-- <span class="iconfont icon1" v-if="!show">&#xe669;</span>
                <span class="iconfont icon2" v-if="show">&#xe669;</span> -->
            </div>
        </div>
        <popup v-model="show" :show-mask="false" class="popup">
            <div class="main_wrapper" v-if="show">
                <div class="search">
                    <x-icon @click="cancel" type="ios-arrow-left" size="24" fill="#fff"></x-icon>
                    <div class="inputBox">
                        <input type="text" class="searchFun" v-model="userContent" placeholder="搜索">
                        <!-- <span class="searchPic" @click="getUserData"></span> -->
                    </div>
                    <div class="searchBtn" @click="getPeople">搜索</div>
                </div>
                <div class="division"></div>
                <ul id="demo">
                   <li v-for="(item,index) in peopleData" :key="index" class="userList">
                       <span class="userListContent">{{item.name}} - {{item.location}}</span>
                        <input class="selecet_depart" name='department' type="radio" :value='item.id'  @click="getSelectData(item)" />
                    </li>
                </ul>
            </div>
            <div class="footer" v-if="show">
                <div class="btn" @click="cancel()">取消</div>
                <div class="btn" @click="confirm()">完成</div>
            </div>
        </popup>
    </div>
</template>
<script>
    import { Popup } from "vux";
    import TaskDao from "@/daos/task_dao";
    export default {
        name:'organization',
        components:{
            Popup
        },
        props: {
            peopleId:{
                type: String,
                default: ''
            },
            leader:{
                type: String,
                default: ''
            },
            name:{
                type: String,
                default: ''
            },
        },
        data: function () {
            return {
                show:false,
                peopleData:[],//所有处理人
                userContent:"",//用户输入的内容
                departPeople:{},
            }
        },
        watch:{
            peopleId:function (newQuestion, oldQuestion) {
                if (newQuestion) {
                    this.getPeople()
                }
            }
        },
        computed: {
            defaultPeople(){
                if (!this.leader) {
                    return ''
                }
                let res = this.peopleData.find(e=>e.id === this.leader)
                return res ? res.name : ''
            },
        },
        mounted(){
            // let userInfo = JSON.parse(localStorage.getItem("user"));
            // this.peopleId = userInfo.deparment.id;
            // this.getDefaultPeople();
            // if (this.peopleId) {
            // }
            this.getPeople()
            // console.log(this.peopleId);
        },
        methods: {
            getDefaultPeople: function(){
                TaskDao.getDefaultPeopleByDepartment(this.peopleId, data => {
                    if(data){
                        this.departPeople = data;
                        this.$emit("selectPeople",this.departPeople);  
                    }
                }); 
            },
            setDefaultPeople(){
                let res = this.peopleData.find(e=>e.id === this.leader)
                this.departPeople = res;
            },
            getPeople(){
                // TaskDao.getDepratmentUserList(this.peopleId, data => {
                //     if(data){
                //         this.peopleData = data;
                //     }
                // });
                TaskDao.getDepartmentLeaders({name:this.userContent},data => {
                    if(data){
                        this.peopleData = data;
                    }
                });

            },

            // 点击搜索按钮
            getUserData(){
                this.$http(this.$API.getAllDevice,{departmentId:this.deviceId,deviceName:this.userContent},true).then((res)=>{
                    this.deviceData = res;
                });
            },
            // 打开选择器
            openPopup(){
                this.show = true;
                // if(this.peopleId){
                //     this.show = true;
                //     // this.getPeople();
                // }else{
                //     alert("请选择部门后，在来选择负责人！");
                //     return false;
                // }
                
            },
            // 单选按钮的点击事件
            getSelectData(data){
                this.departPeople = JSON.parse(JSON.stringify(data));
            },
            // 点击完成按钮
            confirm(){
                this.show = false;
                if(this.departPeople.id){
                    this.$emit("selectPeople",this.departPeople);
                }
            },
            cancel(){
                this.departPeople.id = ""
                this.departPeople.name = ""
                this.show = false;
            }
        },
    }
</script>
<style lang="less" scoped>
    // @import '../../styles/iconfont.css';
    
input{
    &::placeholder{
      color: gray !important;
    }
}
    .organization .vux-popup-mask{
        display: none !important;
    }
    .organization{
        width: 100%;
        // padding-left: 10%;
    }
    .main_wrapper{
        color: #fff;
        width: 100%;
        z-index: 999;
        font-size: 16px;
     // 搜索
        .search{
            width: 100%;
            height: 50px;
            padding: 8px;
            box-sizing: border-box;
            background-color: #18182c;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .inputBox{
                width: 70%;
                height: 100%;
                background-color:#11111f;
                padding: 0 8px;
                box-sizing: border-box;
                border-radius: 16px;
                .searchFun{
                    width: 90%;
                    height: 100%;
                    border: none;
                    outline: none;
                    font-size: 15px;
                    color: #ffffff;
                }
                .searchPic{
                    float:right;
                    width:10%;
                    height:100%;
                }
            }
            .searchBtn {
                padding: 0 8px;
            }
        }
    }
    .header {
    //   padding: 13px 0;
      width: 100%;
      font-size: 16px;
    //   line-height: 16px;
    //   color:#fff;
      padding: 0 !important;
      .header-content {
        padding: 0 !important;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: right;

        img {
          width: 5px;
          height: 11px;
          margin-left: 15px;
        }
      }
    }
    .footer {
        position: fixed;
        bottom: 0px;
        right: 0;
        width: 100vw;
        padding: 20px 0;
        background: #03061C;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index:9999;
        .btn {
            background: #3967DC;
            border-radius: 4px;
            margin-right: 16px;
            color:#fff;
            font-size: 16px;
            padding: 10px 35px !important;
        }
    }
    .iconfont{
        margin-right: 10px;
        font-size: 14px;
    }
    .vux-popup-dialog{
        height: 100vh !important;
        overflow-y: scroll;
        top: 0;
        bottom: unset!important;
        background: #22233f!important;
        font-size: 14px;
        // padding: 0 11px 84px 13px;
        box-sizing: border-box;
        z-index: 9999;
    }
    .name{
        // width: 100%;
        // overflow: hidden !important;
        // text-overflow: ellipsis !important;
        // white-space: nowrap !important;
        // word-break: keep-all !important;
    }
    .icon1{
        margin-left: 5px;
    }
    .icon2{
        margin-left: 5px;
        transform:rotate(90deg);
        -ms-transform:rotate(90deg); 	/* IE 9 */
        -moz-transform:rotate(90deg); 	/* Firefox */
        -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
        -o-transform:rotate(90deg); 
    }
    .selecet_depart{
        // -webkit-appearance: none;
        // line-height: 40px;
        // position: absolute;
        // right:20px;
        // margin-top: 1.5em;
        position: absolute;
        right:20px;
        display: inline-block;
        vertical-align: middle;
        /* 当成为行内块元素时它就可以垂直居中了 */
        width: 18px;
        height: 18px;
        -webkit-appearance: none;
        /* 清除原有的样式 */
        background-color: transparent;
        border: 0;
        outline: 0 !important;
        /* 去掉点击后外面可能会出现的蓝框 */
        line-height: 20px;
        color: #d8d8d8;
    }

    .selecet_depart:after{
         /* //在input的内容之后插入新内容 */
        position: absolute;
        top:12px;
        right:20px;
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        text-align: center;
        line-height: 14px;
        font-size: 14px;
        color: #fff;
        border: 3px solid #ddd;
        background-color: #fff;
        box-sizing: border-box;
        margin-top: -13px;
        /* 规定两个并排的带边框的框 */
    }

    .selecet_depart:checked:after{
        /* 选中之后的样子 */
        content: "L";
        transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
        /* 2D变换旋转，还有平移和缩放，平时旋转用rotate，这个写法是比较复杂一点的写法，
        括号里面的六个值来得矩阵，实现2D变换，更详细的大家去百度查。 */
        -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
        border-color: #456de6;
        background-color: #456de6;
        position: absolute;
        right:20px;
    }

    /********************列表的样式********************/ 
    #demo{
        padding: 0 15px;
        box-sizing: border-box;
        .userList{
            padding: 10px 0;
            .userListContent{
                display: inline-block;
                width:80%;
                font-size: 14px;
                text-align: left;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
</style>

